<template>
  <div>
	  <el-button type="primary" @click="grant">授权</el-button>
	  <!-- boolean  true/false -->
	  <el-tree :data="menus" ref="tree" :default-expand-all="true" :show-checkbox="true" node-key='menuId' :props="props"   ></el-tree>
	  
	  
	  
  </div>
</template>

<script>
  export default {
    name: 'RoleMenu',
	props:['roleId'],
    components: {

    },
    data() {
      return {
		  // menus:[
				// {menuId:1,menuName:'系统管理',
				// 	children:[
				// 		{menuId:3,menuName:'用户管理'},
				// 		{menuId:4,menuName:'角色管理'}
				// 	]
				// },
				// {menuId:2,menuName:'挂号收费'}
		  // ],
		  menus:[],
		  props:{
			  label:'menuName'
		  },
      }
    },
    methods: {
		
		getMenus(){
			this.axios.get('/menu?type=queryList',(data)=>{
				this.menus = data;
			})
		},
		grant(){
			//将角色id 菜单的id 集合发送到后端 保存
			let checkNodes = this.$refs.tree.getCheckedNodes(false,true);
			//console.log(checkNodes);
			let checkMenuId = [];
			for(let i = 0 ;i<checkNodes.length ;i++){
				checkMenuId.push(checkNodes[i].menuId);
			}
			
			this.axios.get('/role?type=grantMenu',(data)=>{
				if(data){
					this.$message.success("授权成功");
					this.$emit("update:showRoleMenu",false)
				}
			},{
				roleId:this.roleId,
				menuId:checkMenuId.join(","), // 1,2 
			})		
		}

    },
	mounted(){
		this.axios.get('/role?type=roleMenus',(data)=>{
			let ids = [];
			for(let i = 0 ;i<data.length ;i++){
				ids.push(data[i].menuId);
			}
			this.$refs.tree.setCheckedKeys(ids)
		},{
			roleId:this.roleId,
		})	
		
	},
    created() {
		this.getMenus();//拉取所有的菜单项目
		
		
	}
  }
</script>

<style>
</style>
